<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box" id="boxId">
        
    </div>
    <div id="root">

    </div>
</body>
<script>
   let obj = {
        name: 'div',// 指定渲染的标签,
        props: { // 属性对象
            class: 'box', // 类名
            id: 'boxId',// id
            key: '1',
            children: [{
                name: 'h1',
                props: {
                    class: 'title',
                    children: ['我是标题']
                }
            }, {
                name: 'ul',
                props: {
                    class: 'list',
                    children: [{
                        name: 'li',
                        props: {
                            class: 'li',
                            children: ['列表一']
                        }
                    }, {
                        name: 'li',
                        props: {
                            class: 'li',
                            children: ['列表二',{
                                name:'b',
                                props:{
                                    class:'bord',
                                    children:['我是加粗的字体']
                                }
                            }]
                        }
                    },]
                }
            },]
        }
    }


    function renderDom(obj,root){
        //创建一个标签
        if(typeof obj==='string'){
            root.innerHTML+=obj
        }else {
            let dom=document.createElement(obj.name)
                //添加props里面的属性
            // Object.keys 获取所有的属性  
            if(Object.keys(obj.props).length){
                //遍历props的内容
                for(let key in obj.props){
                    //children是特殊的属性
                    if(key==='children'){
                        obj.props[key].forEach((item) => {
                            renderDom(item,dom)
                        })
                    }else {
                        //给标签添加属性
                        dom.setAttribute(key,obj.props[key])
                    }
                }
            }
            //添加到指定标签
            root.appendChild(dom)
        }
        
    }
    renderDom(obj,root)
</script>
</html>